<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <style data-for="result" type="text/css">
        body {
            font-family: "Kanit", sans-serif;
            margin: 0;
            height: 100vh;
            overflow: hidden;
        }

        .container {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .effect1 {
            position: absolute;
            margin: 0;
            top: 43%;
            font-size: 2.3em;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            z-index: 3;
            color: #F6A9BD;
        }

        .effect1 .letter {
            display: inline-block;
            line-height: 1em;
        }

        p {
            position: absolute;
            font-size: 1.8em;
            text-transform: uppercase;
            letter-spacing: 5px;
            color: #F0386B;
            font-weight: 100;
            top: 50%;
            z-index: 3;
            opacity: 0;
            top: 50%;
        }

        section {
            display: grid;
            grid-template-columns: repeat(10, auto);
        }

        .item {
            background-color: #F4E0E1;
            height: 100vh;
            z-index: 0;
        }
    </style>

</head>
<body>
<div class="container">
    <h1 class="effect1">您好，欢迎光临！</h1>
    <p>祝工作愉快~</p>
</div>
<section>
    <div class="item">
    </div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</section>
<script src="./js/anime.min.js"></script>
<script type="text/javascript" src="./js/axios-0.18.0.js"></script>
<script type="text/javascript" src="./js/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="./js/token.js"></script>

</body>
</html>
